<template>
  <el-card class='box-card'>
    <el-image :src='userData.avatar' fit='cover' style='width: 100%;' />
    <el-row :gutter='0'>
      <el-col :span='24' style='text-align: center;'>
        <span>{{ userData.userName }}</span>
      </el-col>
    </el-row>
    <el-row :gutter='0'>
      <el-col :span='24' style='text-align: center;'>
        <span style='font-size: 12px;'>{{ userData.introduction || '暂无简介...' }}</span>
      </el-col>
    </el-row>

    <el-row :gutter='10' style='text-align: center;margin-top: 20px'>
      <el-col :span='8'>
        <el-badge class='mark' :value='userData.userDetails.attentions.length' type='danger'>
          <el-button type='danger' plain size='mini' @click="switchTab('attentions')">关注</el-button>
        </el-badge>
      </el-col>
      <el-col :span='8'>
        <el-badge class='mark' :value='userData.userDetails.fans.length' type='danger'>
          <el-button type='danger' plain size='mini' @click="switchTab('fans')">粉丝</el-button>
        </el-badge>
      </el-col>
      <el-col :span='8'>
        <el-badge class='mark' :value='userData.userDetails.blackList.length' type='warning'>
          <el-button type='warning' plain size='mini' @click="switchTab('blackList')">拉黑</el-button>
        </el-badge>
      </el-col>
    </el-row>
    <el-row :gutter='10' style='text-align: center;margin-top: 20px'>
      <el-col :span='8'>
        <el-badge class='mark' :value='userData.userDetails.articles.length' type='primary'>
          <el-button type='primary' plain size='mini' @click="switchTab('myArticles')">文章</el-button>
        </el-badge>
      </el-col>
      <el-col :span='8'>
        <el-badge class='mark' :value='userData.viewsTotal' type='info'>
          <el-button type='primary' disabled plain size='mini'>阅览</el-button>
        </el-badge>
      </el-col>
      <el-col :span='8'>
        <el-badge class='mark' :value='userData.likesTotal' type='info'>
          <el-button type='primary' disabled plain size='mini'>点赞</el-button>
        </el-badge>
      </el-col>
    </el-row>
    <el-row :gutter='10' style='text-align: center;margin-top: 20px'>
      <el-col :span='8'>
        <el-tooltip placement='bottom'>
          <div slot='content'>
            用户权限：<br/>
            游客：只能浏览广场信息 <br/>
            用户：访问网站主体业务 <br/>
            管理员：可参与后台管理 <br/>
          </div>
          <el-button type='warning' plain size='mini'>{{ userData?.isAdmin ? '管理' : '用户' }}</el-button>
        </el-tooltip>
      </el-col>
      <el-col :span='8'>
        <el-tooltip placement='bottom'>
          <div slot='content'>
            审核状态：<br/>
            已审核：可正常访问网站功能 <br/>
            未审核：部分功能将不能正常使用，比如发表文章、评论等 <br/><br/>
            备注：账号发布不良信息或者违规信息，将会进入审核状态 <br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            审核通过恢复正常，否则将冻结或销毁账号 <br/>
          </div>
          <el-button :type="userData?.approved ? 'primary' : 'danger'" plain size='mini'>
            {{ userData?.approved ? '已审' : '未审' }}
          </el-button>
        </el-tooltip>
      </el-col>
      <el-col :span='8'>
        <el-tooltip placement='bottom'>
          <div slot='content'>
            账号状态：<br/>
            正常：可正常访问网站功能 <br/>
            冻结：将无法登录网站 <br/>
          </div>
          <el-button :type='userData?.freezed?"info":"success"' plain size='mini'>
            {{ userData?.freezed ? '冻结' : '正常' }}
          </el-button>
        </el-tooltip>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'UserInfo',
  props: {
    userData: {
      type: Object,
      default() {
        return {
          userName: '',
          approved: true,
          avatar: '',
          introduction: '',
          isAdmin: true,
          likesTotal: 0,
          viewsTotal: 0,
          userDetails: {
            articles: [],
            comments: [],
            likes: [],
            attentions: [],
            fans: [],
            blackList: []
          }
        }
      }
    }
  },
  methods: {
    switchTab(tabName) {
      this.$emit('activeTabOne', tabName)
    }
  }
}
</script>

<style scoped>

</style>
